<template>
  <div class="bg-gray-100">
    <Header ref="header" @change="onChange" />
    <div class="flex flex-row justify-between">
      <div class="w-full">
        <div
          class="my-2 flex items-center rounded-lg p-2 text-lg font-semibold"
          :class="liang.indexOf('-') > -1 ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'"
        >
          <svg class="h-4 w-4 flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path
              d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
            />
          </svg>
          <span class="sr-only">成交额</span>
          <div class="ml-3">
            {{ liang }}
          </div>
        </div>
        <Fenbu ref="fenbu" />
        <div class="mt-2 flex flex-row space-x-2">
          <div class="w-2/5">
            <YiDong ref="yidong" />
          </div>
          <Rank ref="rank" />
          <div class="w-2/5">
            <HotPoint ref="hotPoint" />
          </div>
        </div>
        <Tingpai :list="list"></Tingpai>
        <Zhangting ref="zhangting" />
      </div>
      <div class="">
        <Tonghua ref="tonghua"></Tonghua>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const yidong = ref(null);
const fenbu = ref(null);

const tonghua = ref(null);
const zhangting = ref(null);
const hotPoint = ref(null);
const rank = ref(null);

let i = 0;
function init() {
  fetchData1();
  i++;
  if (i % 3 == 0) {
    fetchData2();
  }
}
onMounted(() => {
  fetchData1();
  fetchData2();
});
function onChange(auto) {
  if (auto) {
    init();
  }
}

function fetchData1() {
  yidong.value.fetchData();
}
function fetchData2() {
  zhangting.value.fetchData();
  rank.value.fetchData();
  tonghua.value.fetchData();
  fenbu.value.fetchData();
  hotPoint.value.fetchData();
  fetchTingPai();
}
import { parse } from 'node-html-parser';
import axios from 'axios';
const list = ref([]);
const liang = ref('');
function fetchTingPai() {
  let arr = [];
  axios.get('https://www.fupanwang.com/qingxu/').then(function (res) {
    let htmlString = res.data;
    const dom = parse(htmlString);
    let tds = dom.querySelectorAll('td');
    let tmp = [];
    tds.forEach((e, index) => {
      // console.log(index,e.structuredText.trim())
      tmp[index % 8] = e.structuredText.trim();
      if (tmp.length == 8) {
        arr.push(tmp);
        tmp = [];
      }
    });
    list.value = arr;
    var pattern = /两市量能[\s\S]*/;
    // console.log(pattern.exec(htmlString)[0])
    let list1 = dom.querySelectorAll(' .df-bc');
    let str = list1[1].structuredText;
    liang.value = pattern.exec(str)[0];
  });
}

let timer = ref(null);
function debounce(fn, delay) {
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}
</script>
